<template>
<div>
  <mu-appbar style="width: 100%;text-align: left" color="primary">
    <span>模型测试</span>
    <mu-button flat slot="right">你好，{{user_info.nickname}}！</mu-button>
  </mu-appbar>
  <div style="clear:both;height:15px"></div>

  <div class="ModelTest panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">模型测试</h3>
    </div>
    <div class="panel-body">
      <mu-container>
        <mu-row gutter>
          <mu-col span="12" lg="4" sm="6">
            <div style="margin-top: 15px">默认使用我的模型进行测试</div>
            <i style="color:blue">如需查看模型参数，请前往“个人资料”查看</i>
          </mu-col>
        </mu-row>
      </mu-container>
      <input id="ChooseUserFile" type="file"  style="visibility: hidden" @change="show"  />
      <div >
        <img src="https://placeholder.idcd.com/?w=250&h=200&text=select+your+image&bgcolor=%236c757d&fontcolor=%23d3d3d3&fontsize=20&fontfamily=1" id="testImg"  style="width: 250px; height: 200px; border-radius: 10px; margin: 10px">
      </div>
      <button type="button" class="btn btn-primary" @click="choosePic">选择测试图片</button>
      <div style="margin: 20px;font-size: 20px" >预测结果：{{result}}</div>
    </div>
  </div>


  <mu-container class="bottomNav">
    <mu-bottom-nav value="3">
      <mu-bottom-nav-item value="1" title="猫狗识别" to="/main" icon="restore"></mu-bottom-nav-item>
      <mu-bottom-nav-item value="2" title="项目实战" to="/practice" icon="edit"></mu-bottom-nav-item>
      <mu-bottom-nav-item value="3" title="模型测试" to="/evalmodel" icon="explore"></mu-bottom-nav-item>
      <mu-bottom-nav-item value="4" title="个人资料" to="/mymodel" icon="person"></mu-bottom-nav-item>
    </mu-bottom-nav>
  </mu-container>

</div>
</template>

<script>
import * as tf from '@tensorflow/tfjs'
const axios = require('axios');
export default {
  name: "EvalModel",
  data(){
    return {
      user_info: {
        nickname:"",
        id:""
      },
      predict_res:"",
      selectModelValue:'',
      selectModel:[
        { value:'1', name:'简单模型'},
        { value:'2', name:'复杂模型'},
      ],
      showImg:'',
      model1:'',
      rubbishName:['纸类垃圾','塑料垃圾','金属垃圾','玻璃垃圾','厨余垃圾','电磁垃圾'],
      result:''
    }
  },
  methods:{
    choosePic(){
      let aBtn=document.getElementById('ChooseUserFile')
      aBtn.click()
    },
    show(ev){
      var _this=this;
      var file = document.getElementById('ChooseUserFile').files[0];
      var img = document.getElementById('testImg');

      let reader = new FileReader();
      var model = {};
      reader.readAsDataURL(file);
      reader.onloadend = function () {

        //showImgSrc是用户上传测试图片的绝对路径
        // _this.showImgSrc= this.result;
        img.src = this.result;
        predict();
      }
      async function predict(source) {
        var img =await document.getElementById('testImg');
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [28,28]).toFloat()
        tf.print(imgTensor)
        let tensor = imgTensor.expandDims(0)
        const prediction = await window.model.predict(tf.div(tensor,255)).dataSync();
        console.log(prediction)
        var index;
        console.log(prediction.length);
        var element = prediction[0];
        for (var i = 0; i < prediction.length; i++) {
          if(prediction[i] >= element){
            element = prediction[i];
            index = i;
          }
        }
        //预测出来的类型下标
        // console.log(index);
        _this.$data.result = _this.$data.rubbishName[index];
        console.log(_this.$data.result);
      }
    }
  },
  mounted() {
    var _this=this
    getInfoAndModel();
    async function getInfoAndModel(){
      await axios.get("http://192.168.31.103:2444/LoginCenter/getUserInfo").then(function(res){
        console.log(res)
        _this.$data.user_info.id=res.data.user_id;
        _this.$data.user_info.nickname=res.data.nickname;
      });
      const MODEL_URL = 'http://192.168.31.103:2444/ModelFile/'+_this.$data.user_info.id+'/model.json'
      const  loadModel = (async function () {
        window.model = await tf.loadLayersModel(MODEL_URL);
        window.model.summary()
      })
      loadModel().then(function(){
        console.log("加载完毕")
      });
    }
  }
}
</script>

<style>

</style>
